<template>
    <div class="Father">
        <Child :game="games" title="游戏列表"/>
        <Child title="图片">
            <img class="childImg" :src="ImagePath"/>
        </Child>
        <Child title="动画视频">
            <video class="childImg" :src="y" controls="true" />
        </Child>
    </div>
    </template>
    
    <script lang="ts">
    export default {
    name:'Father'
    }
    </script>
    
    <script setup lang="ts">
import { inject, provide, reactive, ref, toRef } from 'vue';
    import Child from './Child.vue';
    import x from '@/static/ha.jpg'
    import y from '@/static/【动画短片】《导盲犬Pip》超暖心公益短片.mp4'

    let games = [
        {id:1,gameName:'游戏1'},
        { id: 2, gameName: '游戏2' },
        {id:3,gameName:'游戏3'}
    ]

    let ImagePath = ref(x)

    </script>
    
    <style lang="css">
    .Father{
        display: flex;
        margin: 20px;
        height: 600px;
        width: 800px;
        background-color:aqua;
    }
    .childImg{
        /*height: 100%;*/
        width: 100%;
    }

    </style>